<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesTeamTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
      <!-- 下方template标签放入ele-form-drawer中, 并且需要自行修改插槽属性及绑定表单对象的属性 -->
      <template v-slot:teamLeaderCode>
        <!-- 插槽内容有el-form-item组件包裹 -->
        <el-input
          v-model="formDataDialog.teamLeaderCode"
          readonly
          :placeholder="$t('mesTeam.selectUser')"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="baseUserDialogVisible = true"
          ></el-button>
        </el-input>
      </template>
    </ele-form-drawer>
    <!-- 此组件放到与抽屉平级，理论上不需要修改 -->
    <ele-dialog-table
      :title="$t('mesTeam.userQuery')"
      width="1000px"
      :visible.sync="baseUserDialogVisible"
      :formConfig="baseUserSearchDialog"
      :column="baseUserDialogColumn"
      @getSelectData="getSelectBaseUser"
      :getList="getBaseUserList"
      :hasFooter="hasBaseUserFooter"
    >
    </ele-dialog-table>
  </div>
</template>

<script>
import {
  operateList,
  searchConfig,
  formDescDialogMinxin,
  rowConfig,
} from "./config";
import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  rowDetail,
  getLineCodeList,
  getTeamLeaderCodeList,
} from "@/api/mesScheduling/mesTeam";
import { getBaseCodeStrategy } from "@/api/common";
import { baseUserDialog } from "./mixin";
import url from "@/axios/url";
const { minioUrl } = url();
export default {
  name: "mesTeam",
  mixins: [baseUserDialog, formDescDialogMinxin, searchConfig, operateList],
  data() {
    return {
      lineCodeList: [],
      userCodeList: [],
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {
        codeStrategy: "",
      },
      // searchConfig,
      // operateList,
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
          fixed: "left",
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
          fixed: "left",
        },
        {
          prop: "teamCode",
          label: $i18n.t("mesTeam.teamCode"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "teamName",
          label: $i18n.t("mesTeam.teamName"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        // {
        //   prop: "factoryCode",
        //   label: "工厂编码",
        //   minWidth: 120,
        //   showOverflowTooltip: true,
        // },
        {
          prop: "lineCode",
          label: $i18n.t("mesTeam.lineCode"),
          minWidth: 120,
          showOverflowTooltip: true,
          // optionProp: {
          //   value: "value",
          //   label: "description",
          // },
          // option: async (data) => {
          //   const list = await getLineCodeList()
          //   return list.data.result
          // },
        },
        {
          prop: "lineName",
          label: $i18n.t("mesTeam.lineName"),
          minWidth: 160,
          showOverflowTooltip: true,
        },
        {
          prop: "teamLeaderCode",
          label: $i18n.t("mesTeam.teamLeaderCode"),
          minWidth: 140,
          showOverflowTooltip: true,
          // optionProp: {
          //   value: "value",
          //   label: "description",
          // },
          // option: async (data) => {
          //   const list = await getTeamLeaderCodeList()
          //   return list.data.result
          // },
        },
        {
          prop: "teamLeaderName",
          label: $i18n.t("mesTeam.teamLeaderName"),
          minWidth: 140,
          showOverflowTooltip: true,
        },
        {
          prop: "planPostQuantity",
          label: $i18n.t("mesTeam.planPostQuantity"),
          showOverflowTooltip: true,
          minWidth: 150,
        },
        {
          prop: "actualPostQuantity",
          label: $i18n.t("mesTeam.actualPostQuantity"),
          showOverflowTooltip: true,
          minWidth: 150,
        },
        // {
        //   prop: "remark",
        //   label: "备注",
        //   minWidth: 120,
        //   showOverflowTooltip: true,
        // },
        {
          prop: "createByName",
          label: $i18n.t("common.createByName"),
          width: 130,
          showOverflowTooltip: true,
        },
        {
          prop: "createTime",
          label: $i18n.t("common.createTime"),
          width: 170,
        },
        {
          prop: "updateByName",
          label: $i18n.t("common.updateByName"),
          width: 130,
          showOverflowTooltip: true,
        },
        {
          prop: "updateTime",
          label: $i18n.t("common.updateTime"),
          width: 170,
        },
        {
          prop: "operate",
          label: $i18n.t("common.operation"),
          width: 160,
          fixed: "right",
          render: (h, scope) => {
            return (
              <ele-row-operation
                scope={scope}
                rowConfig={rowConfig}
                onRowOperate={this.rowOperate}
              />
            );
          },
        },
      ],
    };
  },
  computed: {},
  created() {
    this.getBaseCodeStrategy();
  },
  methods: {
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name;
      const { codeStrategy } = this.formDataDialog;
      const fnc = {
        add: () => {
          this.disableFields(false);

          this.formDataDialog = { codeStrategy };
          this.visible = true;
        },
        deleteBatch: () => {
          this.$confirm($i18n.t("common.deleteBatch",{name:$i18n.t('mesTeam.name')}), $i18n.t("common.tip"), {
            confirmButtonText: $i18n.t("common.ok"),
            cancelButtonText: $i18n.t("common.cancel"),
            type: "warning",
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(",");
            this.rowDel(ids);
          });
        },
        exportExcel: () => {
          // window.open(
          //   "http://9000.gr817115.m6tfe15g.ceb51d.grapps.cn/file-template/销售订单模板.zip"
          // );
          var urlexportExcel = `${minioUrl}/mes-template/班组导入模板.xlsx`;
          console.log("aaaaaaa=", urlexportExcel);
          window.open(urlexportExcel);
        },
      };
      fnc[data.handleName]();
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name;
      const fnc = {
        edit: () => {
          this.disableFields(false);
          this.rowDetail(row.id);
          this.visible = true;
        },
        detail: () => {
          this.disableFields(true);
          this.rowDetail(row.id);
          this.visible = true;
        },
        delete: () => {
          this.$confirm(
            $i18n.t("common.deleteSingle",{name:$i18n.t('mesTeam.name')}),
            $i18n.t("common.tip"),
            {
              confirmButtonText: $i18n.t("common.ok"),
              cancelButtonText: $i18n.t("common.cancel"),
              type: "warning",
            }
          ).then(() => {
            this.rowDel(row.id);
          });
        },
      };
      fnc[handleName]();
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true;
      api(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || title);
          this.visible = false;
          this.refresh();
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return; // 判断状态
      const params = this.formDataDialog.id
        ? { title: $i18n.t("common.editSuccess"), api: rowUpdate, data }
        : { title: $i18n.t("common.addSuccess"), api: rowCreate, data };
      this.doSubmit(params);
    },
    //删除
    rowDel(data) {
      this.loading = true;
      rowDel(data)
        .then((res) => {
          const message = res.data.message;
          this.$message.success(message || $i18n.t("common.deleteSuccess"));
          this.refresh();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag;
      this.formDescDialog.isShowSubmitBtn = !flag;
    },
    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result;
      });
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset);
    },
    handleSelect(val) {
      console.log(val);
    },
    //判断是否存在编码规则
    getBaseCodeStrategy() {
      getBaseCodeStrategy({
        code: "teamcode",
        system: "default",
        strategyStatus: "1",
      }).then((res) => {
        // console.log("判断是否存在编码规则", res);
        const result = res.data.result;
        this.formDataDialog.codeStrategy =
          Array.isArray(result) && result.length > 0 ? result[0].code : "";
      });
    },
  },
};
</script>
